<template>

  <div>
    <Row>
      <i-col span="6">

        <b-card style="border:1px solid red;" no-body class="mb-1">

          <b-card-header class="with-elements">
            <a class="d-flex justify-content-between" href="javascript:void(0)" v-b-toggle.accordion1-1>
              <div class="collapse-icon"></div>
              &nbsp;基本源信息
            </a>

          </b-card-header>

          <b-collapse id="accordion1-1" visible>
            <b-card-body>
              <v-jstree :data="treeData001" :class="{ 'tree-rtl': isRTL }" allow-batch @item-click="itemClick" />
            </b-card-body>
          </b-collapse>
        </b-card>

        <b-card no-body class="mb-1 ml-2">
          <b-card-header class="with-elements">
            <a class="d-flex justify-content-between text-dark" href="javascript:void(0)" v-b-toggle.accordion1-2>
              工商信息：主体
              <div class="collapse-icon"></div>
            </a>

            <div class="card-header-elements ml-md-auto">
              <b-btn variant="outline-primary" class="btn-xs">
                <span class="fas fa-cogs"></span> 下探</b-btn>
              <b-btn variant="outline-success" class="btn-xs">
                <span class="ion ion-md-close-circle-outline"></span>Del</b-btn>
            </div>
          </b-card-header>

          <b-collapse id="accordion1-2" invisible>
            <b-card-body>
              <v-jstree :data="treeData" :class="{ 'tree-rtl': isRTL }" allow-batch @item-click="itemClick" />
            </b-card-body>
          </b-collapse>
        </b-card>

        <b-card no-body class="mb-1  ml-4">
          <b-card-header class="with-elements">
            <a class="d-flex justify-content-between text-dark" href="javascript:void(0)" v-b-toggle.accordion1-3>
              逾期黑名单：法人
              <div class="collapse-icon"></div>
            </a>

            <div class="card-header-elements ml-md-auto">
              <b-btn variant="outline-primary" class="btn-xs">
                <span class="fas fa-cogs"></span> 下探</b-btn>
              <b-btn variant="outline-success" class="btn-xs">
                <span class="ion ion-md-close-circle-outline"></span>Del</b-btn>
            </div>
          </b-card-header>

          <b-collapse id="accordion1-3" invisible>
            <b-card-body>
              <v-jstree :data="treeData" :class="{ 'tree-rtl': isRTL }" allow-batch @item-click="itemClick" />
            </b-card-body>
          </b-collapse>
        </b-card>

        <b-card no-body class="mb-1  ml-4">
          <b-card-header class="with-elements">
            <a class="d-flex justify-content-between text-dark" href="javascript:void(0)" v-b-toggle.accordion1-4>
              逾期黑名单：法人配偶
              <div class="collapse-icon"></div>
            </a>

            <div class="card-header-elements ml-md-auto">
              <b-btn variant="outline-primary" class="btn-xs">
                <span class="fas fa-cogs"></span> 下探</b-btn>
              <b-btn variant="outline-success" class="btn-xs">
                <span class="ion ion-md-close-circle-outline"></span>Del</b-btn>
            </div>
          </b-card-header>

          <b-collapse id="accordion1-4" invisible>
            <b-card-body>
              <v-jstree :data="treeData" :class="{ 'tree-rtl': isRTL }" allow-batch @item-click="itemClick" />
            </b-card-body>
          </b-collapse>
        </b-card>

      </i-col>
      <i-col span="18">

        <Row>
          <i-col span="24">

            <b-card header="判定设置区" header-tag="h6" class="mb-2">
              <fieldset id="__BVID__723" role="group" aria-labelledby="__BVID__723__BV_label_" class="b-form-group form-group">
                <legend id="__BVID__723__BV_label_" class="col-form-label pt-0">选定判定对象(可以对象、数组、字段)</legend>
                <div role="group" aria-labelledby="__BVID__723__BV_label_" class="">
                  <input id="__BVID__724" disabled type="text" class="form-control is-valid" value="逾期黑名单（法人）.result.description">
                </div>
              </fieldset>

            </b-card>

          </i-col>

        </Row>

        <Row>

          <b-card header="所选判定工具" header-tag="h6" class="mb-2">
            <i-col span="16">
              <b-card bg-variant="warning" text-variant="dark" header="包含判断" header-tag="h6" class="mb-1">
                <b-form-group label="包含字段">
                  <b-input value="未中黑名单" />
                </b-form-group>
              </b-card>
            </i-col>
            <i-col span="8">
              <b-card bg-variant="danger" text-variant="white" header="执行动作设置" header-tag="h6" class="mb-1">

                <b-form-group label="分数调整值">
                  <b-input value="+45" />
                </b-form-group>
              </b-card>
            </i-col>
          </b-card>

        </Row>

        <Row>
          <i-col span="24">
            <b-card header="推荐判定工具" header-tag="h6" class="mb-1">

              <sky-tool-item :label="'等于'"></sky-tool-item>
              <sky-tool-item :label="'不等于'"></sky-tool-item>
              <sky-tool-item :label="'包含'"></sky-tool-item>

            </b-card>
          </i-col>
        </Row>

      </i-col>
    </Row>

  </div>
</template>

<style src="@/vendor/libs/vue-data-tables/vue-data-tables.scss" lang="scss"></style>
<style src="@/vendor/libs/sweet-modal-vue/sweet-modal-vue.scss" lang="scss"></style>
<style src="@/vendor/libs/vue-jstree/vue-jstree.scss" lang="scss"></style>
<style scoped>
</style>


<script>
import VJstree from "vue-jstree";

export default {
    name: "ui-treeview",
    metaInfo: {
        title: "Treeview - UI elements"
    },
    components: {
        VJstree
    },
    data: () => ({
        treeData: [
            {
                text: "Status",
                icon: "fab fa-wordpress-simple"
            },
            {
                text: "Message",
                icon: "fab fa-wordpress-simple"
            },
            {
                text: "Result",
                icon: "far fa-object-group",
                opened: true,
                children: [
                    {
                        text: "KeyNo",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "Name",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "No",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "BelongOrg",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "OperName",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "StartDate",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "EndDate",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "Status",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "Province",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "UpdatedDate",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "CreditCode",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "RegistCapi",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "EconKind",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "Address",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "Scope",
                        icon: "fab fa-wordpress-simple"
                    },
                    {
                        text: "TermStart",
                        icon: "fas fa-calendar-alt"
                    },
                    {
                        text: "TermEnd",
                        icon: "fas fa-calendar-alt"
                    },
                    {
                        text: "CheckDate",
                        icon: "fas fa-calendar-alt"
                    },
                    {
                        text: "Partners",
                        icon: "fas fa-list-ol",
                        opened: true,
                        children: [
                            {
                                text: "StockName",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "StockType",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "ShouldCapi",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "ShoudDate",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "InvestType",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "InvestName",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "CapiDate",
                                icon: "fas fa-calendar-alt"
                            }
                        ]
                    },
                    {
                        text: "Employees",
                        icon: "fas fa-list-ol",
                        opened: true,
                        children: [
                            {
                                text: "Name",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "Job",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "CerNo",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "ScertName",
                                icon: "fab fa-wordpress-simple"
                            }
                        ]
                    },
                    {
                        text: "ChangeRecords",
                        icon: "fas fa-list-ol",
                        disabled: true,
                        children: [
                            {
                                text: "ProjectName",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "BeforeContent",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "AfterContent",
                                icon: "fab fa-wordpress-simple"
                            },
                            {
                                text: "ChangeDate",
                                icon: "fas fa-calendar-alt"
                            }
                        ]
                    },
                    {
                        text: "ContactInfo",
                        icon: "far fa-object-group",
                        disabled: true,
                        children: [
                            {
                                text: "WebSite",
                                icon: "fab fa-internet-explorer"
                            },
                            {
                                text: "PhoneNumber",
                                icon: "fas fa-phone-volume"
                            },
                            {
                                text: "Email",
                                icon: "far fa-envelope"
                            }
                        ]
                    }
                ]
            }
        ],
        treeData001: [
            {
                text: "companyName",
                icon: "fab fa-wordpress-simple"
            },
            {
                text: "companyNo",
                icon: "fab fa-wordpress-simple"
            },
            {
                text: "owner",
                icon: "fab fa-wordpress-simple"
            },
            {
                text: "ownerIcardId",
                icon: "fab fa-wordpress-simple"
            },
            {
                text: "ownerMobile",
                icon: "fab fa-wordpress-simple"
            }
        ]
    }),
    computed: {
        treeDataJson() {
            return JSON.stringify(this.treeData);
        }
    },
    methods: {
        itemClick(node) {
            console.log(node.model.text + " clicked !");

            // Trigger model update by clonning data
            this.treeData = this.treeData.slice(0);
        }
    }
};
</script>
